<template>

	<view style="background-color: #fff; padding: 0 20rpx;">

		<u-form labelPosition="left" :model="form" ref="uForm" labelWidth='140'>

			<!-- #ifdef APP-PLUS-->
			<u-form-item label="真实姓名" prop="realName" borderBottom>
				<u--input v-model="form.realName" border="none" placeholder="请输入真实姓名"></u--input>
			</u-form-item>
			<u-form-item label="身份证号码" prop="cardId" borderBottom>
				<u--input v-model="form.cardId" border="none" placeholder="请输入身份证号码"></u--input>
			</u-form-item>
			<!--  #endif -->

			<u-form-item label="上传身份证正面" prop="cardFrontImg">
				<!-- #ifdef MP-WEIXIN -->
				<ocr-navigator @onSuccess="ocrSuccess" certificateType="idCard" :opposite="false"
					style="width: 230rpx; height: 230rpx;">
					<view class="back">
						<u-icon name="camera-fill" color="#D3D4D6" size="26px" v-if="!form.cardFrontImg"></u-icon>
						<image :src="form.cardFrontImg" style="width: 110px;height: 110px;" v-if="form.cardFrontImg"
							mode=""></image>
					</view>
				</ocr-navigator>
				<!-- #endif -->
				<!-- #ifdef APP-PLUS-->
				<u-upload :capture="['album', 'camera']" accept="image" @afterRead="afterRead(1, $event)"
					@delete="deletePic(1,$event)" multiple :maxCount="1" width="210rpx" height="210rpx"
					:fileList="rightSide" :sizeType="['compressed']">
				</u-upload>
				<!--  #endif -->

			</u-form-item>
			<u-form-item label="上传身份证背面" prop="cardReverseImg">

				<!-- #ifdef MP-WEIXIN -->
				<ocr-navigator @onSuccess="ocrSuccess" certificateType="idCard" :opposite="true"
					style="width: 230rpx; height: 230rpx;">
					<view class="back">
						<u-icon name="camera-fill" color="#D3D4D6" size="26px" v-if="!form.cardReverseImg"></u-icon>
						<image :src="form.cardReverseImg" style="width: 110px;height: 110px;" v-if="form.cardReverseImg"
							mode=""></image>
					</view>
				</ocr-navigator>
			
				<!-- #endif -->
				<!-- #ifdef APP-PLUS-->
				<u-upload :capture="['album', 'camera']" accept="image" @afterRead="afterRead(2,$event)"
					@delete="deletePic(2,$event)" multiple :maxCount="1" width="210rpx" height="210rpx"
					:fileList="ReverseSide" :sizeType="['compressed']">
				</u-upload>
				<!--  #endif -->


			</u-form-item>
			<view class="uni-btn-v">
				<!-- #ifdef MP-WEIXIN -->
				<u-button @click="formSubmit" type="primary" :loading="isLoading" loadingText="提交中..."
					text="提交审核"></u-button>
				<!-- #endif -->
				<!-- #ifdef APP-PLUS -->
				<u-button @click="formSubmitApp" type="primary" :loading="isLoading" loadingText="提交中..."
					text="提交审核"></u-button>
				<!-- #endif -->
			</view>
		</u-form>

	</view>
</template>

<script>
	import {
		VUE_APP_API_URL
	} from "@/config";
	import cookie from "@/utils/store/cookie";
	import {
		addIdentificationCard
	} from "@/api/user.js"
	import {
		customUpdateAvatar
	} from "@/utils/customUpdateAvatar"
	export default {
		data() {
			return {
				form: {
					realName: '',
					cardId: '',
					cardFrontImg: '',
					cardReverseImg: ''
				},
				rightSide: [],
				ReverseSide: [],
				isLoading: false,
				rules: {
					// #ifdef APP-PLUS
					'cardId': [{
							type: 'string',
							required: true,
							message: '请输入身份证号码',
							trigger: ['blur', 'change']
						},
						{
							// 自定义验证函数
							validator: (rule, value, callback) => {
								// 返回true表示校验通过，返回false表示不通过
								return this.$u.test.idCard(value)
							},
							message: '身份证不正确',
							// 触发器可以同时用blur和change
							trigger: ['blur', 'change'],
						},
					],
					'realName': {
						type: 'string',
						required: true,
						message: '请填写真实姓名',
						trigger: ['blur', 'change']
					},
					// #endif
					'cardFrontImg': {
						type: 'string',
						required: true,
						message: '请上传身份证正面',
						trigger: ['blur', 'change']
					},
					'cardReverseImg': {
						type: 'string',
						required: true,
						message: '请上传身份证背面',
						trigger: ['blur', 'change']
					}
				}
			}
		},
		onReady() {
			// 如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则
			this.$refs.uForm.setRules(this.rules)
		},
		methods: {
			formSubmitApp() {
				let self = this
				this.form.cardFrontImg = this.rightSide.length > 0 ? this.rightSide[0].url : []
				this.form.cardReverseImg = this.ReverseSide.length > 0 ? this.ReverseSide[0].url : []
				this.$refs.uForm.validate().then(res => {
					self.isLoading = true
					console.log(self.form)
					addIdentificationCard(self.form).then((res) => {
						self.isLoading = false
						uni.showToast({
							title: '认证成功',
							icon: 'none'
						});
						setTimeout(() => {
						self.$yrouter.reLaunch({
							path: "/pages/launch/index",
							query: {
								type: 'User'
							}
						});
						}, 1500)
					}).catch(error => {
						console.log(error)
						uni.showToast({
							title: error.msg,
							icon: "none"
						});
						self.isLoading = false
					})

				}).catch(errors => {
					uni.showToast({
						title: "请完善身份证信息",
						icon: "none"
					});

				})
			},
			//删除图片
			deletePic(status, event) {
				if (status == 1) {
					this.rightSide.splice(event, 1)
				} else {
					this.ReverseSide.splice(event, 1)
				}
			},
			// 新增图片
			async afterRead(status, event) {

				const result = await customUpdateAvatar(event.file[0].url);

				if (status == 1) {
					this.rightSide = [{
						url: result
					}]
				} else {
					this.ReverseSide = [{
						url: result
					}]
				}
				console.log('result', status, result)
			},
			formSubmit() {
				let self = this
				this.$refs.uForm.validate().then(res => {
					self.isLoading = true
					addIdentificationCard(self.form).then((res) => {
						self.isLoading = false
						uni.showToast({
							title: '认证成功',
							icon: 'none'
						});
						setTimeout(() => {
							self.$yrouter.reLaunch({
								path: "/pages/launch/index",
								query: {
									type: 'User'
								}
							});
						}, 1500)
					}).catch(error => {
						console.log(error)
						uni.showToast({
							title: error.msg,
							icon: "none"
						});
						self.isLoading = false
					})

				}).catch(errors => {
					uni.showToast({
						title: "请完善身份证信息",
						icon: "none"
					});

				})
			},
			async ocrSuccess(e) {
				console.log(e, 'e')
				if (!e.detail.type) {
					this.form.realName = e.detail.name.text
					this.form.cardId = e.detail.id.text
				}
				const result = await customUpdateAvatar(e.detail.image_path);
				!e.detail.type ? this.form.cardFrontImg = result : this.form.cardReverseImg = result

			}
		},
	};
</script>
<style scoped lang="less">
	.back {
		width: 230rpx;
		height: 230rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #f4f5f7;
		border-radius: 2px;
		margin: 0 8px 8px 0;
		box-sizing: border-box;
	}
</style>